<script>

import Window5 from "../view/Window5.vue";
import Window6 from "./Window6.vue";
import Window7 from "./Window7.vue";
import Window8 from "./Window8.vue";


export default {
  components: {
    Window5, Window6, Window7, Window8
  },
  methods: {
    handleWindow5Close() {
      this.showWindow5 = false;
    },
    handleWindow6Close() {
      this.showWindow6 = false;
    },
    handleWindow7Close() {
      this.showWindow3 = false;
    },
    handleWindow8Close() {
      this.showWindow8 = false;
    },
  },
  data() {
    return {
      showWindow5: true,
      showWindow6: true,
      showWindow7: true,
      showWindow8: true,
    };
  },
};
</script>

<template>
  <div id="mainSecondCon" class="bg">
    <div dv-bg>
      <!--    内容第二行-->
      <div class="module-box" style="padding: 0px 5px 2px 5px">

        <!--        左边-->
        <div style="flex: 0 1 25%;height: 400px ">
          <dv-border-box8 v-if="showWindow5">
            <div dv-bg>
              <Window5 @closeWindow="handleWindow5Close"/>
            </div>
          </dv-border-box8>
        </div>

        <!--        中间第一个-->
        <div style="flex: 0 1 25%;height: 400px">
          <dv-border-box8 v-if="showWindow6">
            <div dv-bg>
              <window6 @closeWindow="handleWindow6Close"/>
            </div>
          </dv-border-box8>
        </div>

        <!--        中间第二个-->
        <div style="flex: 0 1 25%;height: 400px;transform: rotateY(180deg)">
          <dv-border-box8 v-if="showWindow7">
            <div dv-bg>
              <div style="transform: rotateY(180deg)">
                <window7 @closeWindow="handleWindow7Close"/>
              </div>
            </div>
          </dv-border-box8>
        </div>

        <!--        右边-->
        <div style="flex: 0 1 25%;height: 400px;">
          <dv-border-box8 v-if="showWindow8">
            <div dv-bg>
              <window8 @closeWindow="handleWindow8Close"/>
            </div>
          </dv-border-box8>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>
.bg {
  background: url('../assets/img/pageBg.png') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  color: white;
}

</style>